<template>
  <div class="components-container">
    <sweet-modal ref="dialog" class="dialog" :sweetModalMaxWidth="pageWidth" v-bind:blocking="blockings"
      v-bind:hideCloseButton="hideCloseButtons">
      <h3>{{title}}</h3>
      <div :style="{maxHeight:maxHeight+'px'}" style="overflow:auto;">
        <el-table ref="multipleTable" :data="diechdData" row-key="FCMFCSID" :expand-row-keys="expands"
          @row-click="rowClick">
          <el-table-column type="expand">
            <!-- <template slot-scope="props">
                        <el-table :data="fileDetail">
                            <el-table-column prop="name" label="附件名"></el-table-column>
                            <el-table-column prop="address" label="下载地址"><template slot-scope="propss"><el-button @click="download(propss.row)">查看</el-button></template></el-table-column>
                            <el-table-column prop="address" width="100" label="删除"><template slot-scope="propss"><el-button @click="deletefj(propss.row)">删除</el-button></template></el-table-column>
                        </el-table>
                    </template> -->
            <template slot-scope="props">
              <table class="layui-table" style="border-spacing: 0;">
                <colgroup>
                  <col width="200">
                  <col width="100">
                  <col width="100">
                  <!-- <col width="100"> -->
                </colgroup>
                <thead>
                  <tr>
                    <th style="text-align:center;">附件名</th>
                    <th style="text-align:center;">下载地址</th>
                    <!-- <th style="text-align:center;" v-if="status === 'A'">修改</th> -->
                    <!-- <th style="text-align:center;">删除</th> -->
                  </tr>
                </thead>
                <tbody ref='inputs'>
                  <tr class="allRow" v-for="(chl,index) in fileDetail">
                    <td>
                      <el-input v-model="chl.name" @blur="changename($event,chl)" @change="ischange = true"></el-input>
                    </td>
                    <td style="text-align:center;">
                      <el-button @click="download(chl)">查看</el-button>
                    </td>
                    <!-- <td style="text-align:center;" v-if="status === 'A'">
                                        <div class="file-boxs"><input accept="image/*" class="file-btn" name="upimage" type="file" @change="imgchanges($event,chl)">修改</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <el-button @click="deletefj(chl)" :disabled="!(status === 'A')">删除</el-button>
                                    </td> -->
                  </tr>
                </tbody>
              </table>
            </template>
          </el-table-column>
          <el-table-column prop="FCMISNUSTDESC" label="状态" width="200" align="center"></el-table-column>
          <el-table-column prop="FCMFCSID" label="附件名" width="200" align="center"></el-table-column>
          <el-table-column prop="FileNum" label="已上传附件数量" width="200" align="center"></el-table-column>

          <!-- <el-table-column prop="FCMISNUSTDESC" label="状态" width="100" align="center"></el-table-column>
                <el-table-column prop="FCMFCSID" label="附件名" width="100" align="center"></el-table-column>
                <el-table-column prop="FileNum" label="已上传附件数量" width="150" align="center"></el-table-column>
                <el-table-column prop="FileNums" label="拍照上传" width="150" align="center"><template slot-scope="scope"><el-button type="primary" @click="photoscs(scope.$index,scope.row)">拍照上传</el-button></template></el-table-column>
                <el-table-column prop="FileNumss" label="选择文件上传" width="150" align="center"><template slot-scope="scope"><div class="file-box"><input accept="image/*" class="file-btn" name="upimage" type="file" @change="imgchange($event,scope.row)">上传文件</div></template></el-table-column> -->
        </el-table>
      </div>
      <!-- <el-tabs type="border-card">
        <el-tab-pane v-for="(item,index) in diechdData" :key="index" :label="`${item.FCMFCSID}(${item.FileNum})`">
          <div style="display:flex;">
            <div v-for="(items,indexs) in diechdData.children">
              <div style="width:100px;height:100px;background-color:#red;">21132132</div>
              <img src="http://localhost:11111/Files/20190904151352812_lh1bxghu_高拍仪照片eltfyt2s.png" alt="" width="300"
                height="300">
            </div>
          </div>
        </el-tab-pane>
      </el-tabs> -->

      <div class="layui-form-item btnCenter">
        <el-button @click="closeDialogs">取消</el-button>
        <!-- <el-button type="primary" @click="submit" :loading="this.$store.state.isloading">保存</el-button> -->
      </div>
    </sweet-modal>
    <!-- </el-dialog>   -->

  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";

.el-button + .el-button {
  margin-left: 0;
}

.longtext {
  width: 480px;
}

.longertext {
  width: 770px;
}

.sweet-btn {
  margin-top: 20px;
}

.radio {
  margin-top: 9px;
}

.file-boxs {
  width: 70px;
  height: 42px;
  line-height: 41px;
  border-radius: 4px;
  transition: 0.1s;
  font-size: 14px;
  color: #606266;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  display: inline-block;
  position: relative;
  top: 3px;
  overflow: hidden;
}

.file-btn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  outline: none;
  background-color: transparent;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}
</style>
<script>
import sweetModal from "@/components/sweetModal";
import dataTable from "@/components/Table/DataTable";
import apiBase from "@/api/apiBase.js";
import { ORDER } from "@/const/orderConst.js";
import { manage } from "@/mixins/managePage.js";
export default {
  name: "Appendixlists",
  mixins: [manage],
  data() {
    return {
      title: null,
      pageWidth: 800,
      maxHeight: 800,
      blockings: true,
      hideCloseButtons: true,
      order: null,
      ids: null,
      fileDetail: [],
      diechdData: [],
      alloptions: [],
      options: [],
      bxoptions: [],
      kxoptions: [],
      index: null,
      expands: [],
      ischange: false,
      FCMFCSIDS: null
    };
  },
  methods: {
    rowClick(row, event, column) {
      this.openrow(row);
      let nodeName = event.target.nodeName;

      Array.prototype.remove = function(val) {
        let index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (nodeName === "BUTTON" || nodeName === "INPUT") {
        return;
      }
      if (this.expands.indexOf(row.FCMFCSID) < 0) {
        this.expands = [];
        this.expands.push(row.FCMFCSID);
      } else {
        this.expands.remove(row.FCMFCSID);
      }
    },

    //获取附件详情
    openrow(val) {
      this.FCMFCSIDS = val.FCMFCSID;
      let data = {
        FRCCODNAME: val.FCMFCSID,
        FRCMBDID: this.ids
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().FileConfig.QueryFileDesc,
        res => {
          this.fileDetail = res.data.content;
          if (this.fileDetail.length == 0) return;
          for (let index in this.fileDetail) {
            this.fileDetail[index].name =
              this.fileDetail[index].FLINAME + this.fileDetail[index].FLIENT;
          }
        }
      );
    },
    //修改上传文件名字
    changename(name, val) {
      if (this.ischange === false) return;
      let data = {
        FLIID: val.FLIID,
        FLINAME: val.name
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().FileConfig.ModifyFileName,
        res => {
          if (res.data.msg == "成功") {
            Message.success("附件名修改成功！");
          } else {
            Message.error("附件名修改失败！");
          }
          this.ischange = false;
        }
      );
    },
    closeDialogs() {
      this.$refs.dialog.close();
      this.expands = [];
    },
    //下载
    download(val) {
      let data = {
        FLIID: val.FLIID
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().FileConfig.DetailFile,
        res => {
          var url = res.data.content.Url;
          window.open(url);
        }
      );
    },
    //修改上传图片
    imgchanges(e, val) {
      var file = e.target.files[0];
      var r = new FileReader();
      r.readAsDataURL(file);
      var s;
      var FRCMBDIDS = this.index;
      var FRCCODNAMES = this.FCMFCSIDS;
      r.onloadend = function() {
        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
        var last = "." + e.target.files[0].name.match(/\.([^\.]+)$/)[1];
        var dataURL = r.result;
        var w = dataURL.indexOf(",");
        var s = dataURL.substring(w + 1);
        let data = {
          FRCMBDID: FRCMBDIDS,
          FRCCODNAME: FRCCODNAMES,
          FLIID: val.FLIID,
          FileContentBase64: s,
          FleEnt: last
        };
        apiBase.DoService(
          data,
          apiBase.getApiAdress().FileConfig.ModifyFile,
          res => {
            //   this.openrow({FCMFCSID:this.FCMFCSIDS});
            if (res.data.msg == "成功") {
              Message.success("修改成功！");
            } else {
              Message.error("修改失败！");
            }
          }
        );
      };
      setTimeout(() => {
        this.getData(this.ids);
      }, 1000);
      this.expands = [];
    },

    //删除
    deletefj(val) {
      this.$confirm("确认是否删除该附件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(callback => {
          let data = {
            FLIID: val.FLIID
          };
          apiBase.DoService(
            data,
            apiBase.getApiAdress().FileConfig.DeleteFile,
            res => {
              for (var i = 0; i < this.fileDetail.length; i++) {
                if (this.fileDetail[i].FLIID === val.FLIID) {
                  this.fileDetail.splice(i, 1);
                  this.getData(this.ids);
                }
              }
              if (res.data.msg == "成功") {
                Message.success("删除成功！");
              } else {
                Message.error("删除失败！");
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //获取数据
    getData(id) {
      this.index = id;
      let data = {
        MBDID: id
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().FileConfig.QueryRecordByMbid,
        res => {
          this.diechdData = res.data.content;
          for (let index in this.diechdData) {
            this.diechdData[index].FCMISNUSTDESC = this.diechdData[
              index
            ].FCMISNUSTDESC;
            this.diechdData[index].FCMFCSID = this.diechdData[index].FCMFCSID;
            this.diechdData[index].FileNum = this.diechdData[index].FileNum;
          }
        }
      );
    },

    btnShow(btn) {
      if (btn == "新增") return true;
      if (btn == "删除" && this.currentRow) return true;
      if (btn == "修改" && this.currentRow) return true;
      if (btn == "详情") return true;
    },
    //功能操作
    operate(order, id) {
      this.order = order;
      this.ids = id;
      switch (this.order) {
        case "附件上传":
          this.title = "附件上传";
          this.fileDetail = [];
          this.diechdData = [];
          this.$refs.dialog.open();
          this.getData(id);
          break;
        default:
      }
    }
    // 直接显示照片 9-15 王星跃
    // getData(id) {
    //   this.index = id;
    //   let data = {
    //     MBDID: id
    //   };
    //   apiBase.DoService(
    //     data,
    //     apiBase.getApiAdress().FileConfig.QueryRecordByMbid,
    //     res => {
    //       this.diechdData = res.data.content;
    //       this.diechdData.forEach((item, index) => {
    //         apiBase.DoService(
    //           {
    //             FRCCODNAME: item.FCMFCSID,
    //             FRCMBDID: this.ids
    //           },
    //           apiBase.getApiAdress().FileConfig.QueryFileDesc,
    //           res => {
    //             this.fileDetail = res.data.content;
    //             if (this.fileDetail.length == 0) return;
    //             this.fileDetail.forEach((items, indexs) => {
    //               apiBase.DoService(
    //                 { FLIID: items.FLIID },
    //                 apiBase.getApiAdress().FileConfig.DetailFile,
    //                 res => {
    //                   var url = res.data.content.Url;
    //                   if (this.diechdData[index].children) {
    //                     this.diechdData[index].children.push({
    //                       Url: res.data.content.Url
    //                     });
    //                   } else {
    //                     this.$set(this.diechdData[index], "children", [
    //                       { Url: res.data.content.Url }
    //                     ]);
    //                   }
    //                 }
    //               );
    //             });
    //           }
    //         );
    //       });
    //     }
    //   );
    // }
  },
  created() {
    //    this.getData();
    // newscanWS.connects();
  },
  mounted() {
    // this.initSeachdata();
  },
  components: {
    dataTable,
    sweetModal
  },
  watch: {}
};
</script>
